import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const FireStatusMeta: IPublicTypeComponentMetadata = {
  componentName: 'FireStatus',
  title: '消防现状',
  category: '左右侧',
  group: '消防安全',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'FireStatus',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
  ],
  configure: {
    props: [
      // 基础属性
      {
        name: 'basic',
        type: 'group',
        display: 'accordion',
        title: {
          label: '基础属性',
        },
        items: [
                     {
             name: 'width',
             title: {
               label: '宽度',
               tip: '组件宽度'
             },
             setter: 'NumberSetter',
             defaultValue: 500,
           },
          {
            name: 'height',
            title: {
              label: '高度',
              tip: '组件高度'
            },
            setter: 'NumberSetter',
            defaultValue: 800,
          },
          {
            name: 'noResponsiveScale',
            title: {
              label: '禁用响应式缩放',
              tip: '当父容器有缩放时，禁用子组件的响应式缩放'
            },
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            name: 'componentId',
            title: {
              label: '组件ID',
              tip: '设置组件的唯一标识符'
            },
            setter: 'StringSetter',
          },
        ]
      },
      // 状态栏配置
      {
        name: 'statusBar',
        type: 'group',
        display: 'accordion',
        title: {
          label: '状态栏配置',
        },
        items: [
          {
            name: 'statusBar.chineseText',
            title: {
              label: '中文标题',
              tip: '状态栏显示的中文标题'
            },
            setter: 'StringSetter',
            defaultValue: '消防现状',
          },
          {
            name: 'statusBar.englishText',
            title: {
              label: '英文标题',
              tip: '状态栏显示的英文标题'
            },
            setter: 'StringSetter',
            defaultValue: 'FIRE STATUS',
          },
          {
            name: 'statusBar.theme',
            title: {
              label: '主题',
              tip: '状态栏主题'
            },
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  { label: '深色', value: 'dark' },
                  { label: '浅色', value: 'light' }
                ]
              }
            },
            defaultValue: 'dark',
          }
        ]
      },
      // 方向统计配置
      {
        name: 'directionCount',
        type: 'group',
        display: 'accordion',
        title: {
          label: '方向统计配置',
        },
        items: [
          {
            name: 'directionCount.data',
            title: {
              label: '数据配置',
              tip: '方向统计数据配置'
            },
            setter: 'JsonSetter',
            defaultValue: [
              { direction: '东', count: 125, unit: '台' },
              { direction: '南', count: 98, unit: '台' },
              { direction: '西', count: 156, unit: '台' },
              { direction: '北', count: 89, unit: '台' }
            ],
          }
        ]
      },
      // 第一个标题配置
      {
        name: 'firstTitle',
        type: 'group',
        display: 'accordion',
        title: {
          label: '第一个标题配置',
        },
        items: [
          {
            name: 'firstTitle.title',
            title: {
              label: '标题',
              tip: '第一个标题文字'
            },
            setter: 'StringSetter',
            defaultValue: '设备分布统计',
          }
        ]
      },
      // 双柱状图配置
      {
        name: 'dualBarChart',
        type: 'group',
        display: 'accordion',
        title: {
          label: '双柱状图配置',
        },
        items: [
          {
            name: 'dualBarChart.data',
            title: {
              label: '图表数据',
              tip: '双柱状图的数据'
            },
            setter: 'JsonSetter',
            defaultValue: [],
          },
          {
            name: 'dualBarChart.config',
            title: {
              label: '图表配置',
              tip: '双柱状图的配置项'
            },
            setter: 'JsonSetter',
            defaultValue: {},
          }
        ]
      },
      // 第二个标题配置
      {
        name: 'secondTitle',
        type: 'group',
        display: 'accordion',
        title: {
          label: '第二个标题配置',
        },
        items: [
          {
            name: 'secondTitle.title',
            title: {
              label: '标题',
              tip: '第二个标题文字'
            },
            setter: 'StringSetter',
            defaultValue: '设备类型分析',
          }
        ]
      },
      // 3D饼图配置
      {
        name: 'threeDPieChart',
        type: 'group',
        display: 'accordion',
        title: {
          label: '3D饼图配置',
        },
        items: [
          {
            name: 'threeDPieChart.data',
            title: {
              label: '图表数据',
              tip: '3D饼图的数据'
            },
            setter: 'JsonSetter',
            defaultValue: [],
          },
          {
            name: 'threeDPieChart.config',
            title: {
              label: '图表配置',
              tip: '3D饼图的配置项'
            },
            setter: 'JsonSetter',
            defaultValue: {},
          }
        ]
      },
      // 第三个标题配置
      {
        name: 'thirdTitle',
        type: 'group',
        display: 'accordion',
        title: {
          label: '第三个标题配置',
        },
        items: [
          {
            name: 'thirdTitle.title',
            title: {
              label: '标题',
              tip: '第三个标题文字'
            },
            setter: 'StringSetter',
            defaultValue: '消防设备详情',
          }
        ]
      },
      // 消防设备饼图配置
      {
        name: 'firePieChart',
        type: 'group',
        display: 'accordion',
        title: {
          label: '消防设备饼图配置',
        },
        items: [
          {
            name: 'firePieChart.data',
            title: {
              label: '图表数据',
              tip: '消防设备饼图的数据'
            },
            setter: 'JsonSetter',
            defaultValue: [],
          },
          {
            name: 'firePieChart.config',
            title: {
              label: '图表配置',
              tip: '消防设备饼图的配置项'
            },
            setter: 'JsonSetter',
            defaultValue: {},
          }
        ]
      }
    ],
    supports: {
      style: true,
      className: true,
    },
    component: {
      isContainer: false,
      isModal: false,
    },
  },
  icon: 'https://img.alicdn.com/imgextra/i4/O1CN01XCiY1B1UyR3MKMFvk_!!6000000002580-55-tps-200-200.svg',
  keywords: ['消防现状', 'fire', 'status', 'chart', 'data'],
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '消防现状',
    screenshot: '',
    schema: {
      componentName: 'FireStatus',
      props: {
                 width: 500,
         height: 1020,
        noResponsiveScale: true,
        componentId: 'fire-status-component',
        statusBar: {
          chineseText: '消防现状',
          englishText: 'FIRE STATUS',
          theme: 'dark'
        },
        directionCount: {
          data: [
            { direction: '东', count: 125, unit: '台' },
            { direction: '南', count: 98, unit: '台' },
            { direction: '西', count: 156, unit: '台' },
            { direction: '北', count: 89, unit: '台' }
          ]
        },
        firstTitle: {
          title: '设备分布统计'
        },
        dualBarChart: {
          data: [],
          config: {}
        },
        secondTitle: {
          title: '设备类型分析'
        },
        threeDPieChart: {
          data: [],
          config: {}
        },
        thirdTitle: {
          title: '消防设备详情'
        },
        firePieChart: {
          data: [],
          config: {}
        }
      }
    }
  }
];

export default {
  ...FireStatusMeta,
  snippets
}; 